import React,{useState,useEffect} from 'react';
import { Layout, Row, Col, Card, Avatar, List, Typography, Badge, Space } from 'antd';
import { BellOutlined, UserOutlined, TeamOutlined, NotificationOutlined } from '@ant-design/icons';
import './ProfilePage.css';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import axios from 'axios';


const { Header, Content } = Layout;
const { Title, Text, Link, Paragraph } = Typography;


// 模拟用户数据
const userInfo = {
    name: '名字',
    title: '视频推流师',
    company: '资深',
    location: '北京',
    avatar: 'https://via.placeholder.com/150',
};

// 模拟项目数据
const projectData = Array(6).fill({ name: '企业级产品设计系统', team: 'Arco Design System', members: 35 });

// 模拟团队数据
const teamData = Array(4).fill({ name: '火灿引擎智能应用团队', members: 20 });

// 模拟动态数据
const activityData = [
    { user: '王多鱼', action: '审核了图文内容', content: '2021年，你过得怎么样？', time: '刚刚' },
    { user: '王多鱼', action: '审核了图文内容', content: '2021年，你过得怎么样？', time: '10分钟前' },
];

const Home1: React.FC = () => {
    const [img,setImg]=useState('')
    const [name,setName]=useState('')
    const list=async()=>{
        let data=await axios.post('http://localhost:3000/login')
        if(data.data.code===200){
            setImg(data.data.data[0].img)
            setName(data.data.data[0].name)
        }
    }
    useEffect(()=>{
        list()
    },[])


    const navigate = useNavigate();
    // 添加退出登录处理函数
    const handleLogout = () => {
        // 清除本地存储的用户信息和token
        localStorage.removeItem('userInfo');
        localStorage.removeItem('token'); // 清除token
        // 跳转到登录页面
        navigate('/login', { replace: true }); // 使用replace防止后退
    };

    return (
        <Layout className="profile-layout">
            <Header className="profile-header" style={{ background: '#fff', padding: '0 24px' }}>
                <Title level={2} style={{ margin: '16px 0' }}>个人中心 / 用户信息</Title>
                
            </Header>
            <Content className="profile-content" style={{ padding: '24px' }}>
                {/* 用户信息头部 */}
                <Card className="profile-card" style={{ marginBottom: '24px' }}>
                    <Row align="middle" justify="center" gutter={[24, 0]}>
                        <Col>
                            <Badge count={1} dot>
                                <Avatar size={128} src={img} icon={<UserOutlined />} />
                            </Badge>
                        </Col>
                        <Col>
                            <Space direction="vertical">
                                <Title level={3} style={{ margin: 0 }} onClick={() => navigate('/profile')}>{name}</Title>
                                <Space>
                                    <Text type="secondary"><UserOutlined /> {userInfo.title}</Text>
                                    <Text type="secondary"><TeamOutlined /> {userInfo.company}</Text>
                                    <Text type="secondary"><span role="img" aria-label="location">📍</span> {userInfo.location}</Text>
                                </Space>
                                <Button type="primary" danger icon={<LogoutOutlined />} onClick={handleLogout}>
                                    退出登录
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Card>

                {/* 主要内容区域 */}
                <Row gutter={[24, 24]}>
                    {/* 左侧内容 - 我的项目 */}
                    <Col xs={24} lg={16}>
                        <Card className="content-card">
                            <div className="card-header">
                                <Title level={4} style={{ margin: 0 }}>我的项目</Title>
                                <Link>查看更多</Link>
                            </div>
                            <List
                                grid={{ gutter: 16, column: 3, xs: 1, sm: 2, md: 3, lg: 3 }}
                                dataSource={projectData}
                                renderItem={(item) => (
                                    <List.Item>
                                        <Card hoverable>
                                            <Card.Meta
                                                title={item.name}
                                                description={item.team}
                                            />
                                            <div style={{ marginTop: 16, display: 'flex', alignItems: 'center' }}>
                                                <div style={{ display: 'flex', marginRight: 8 }}>
                                                    {Array(3).fill(0).map((_, i) => (
                                                        <Avatar key={i} size={24} style={{ marginLeft: -8 }} src={`https://i.pravatar.cc/30?img=${i}`} />
                                                    ))}
                                                </div>
                                                <Text type="secondary">等{item.members}人</Text>
                                            </div>
                                        </Card>
                                    </List.Item>
                                )}
                            />
                        </Card>

                        {/* 最新动态 */}
                        <Card className="content-card" style={{ marginTop: 24 }}>
                            <div className="card-header">
                                <Title level={4} style={{ margin: 0 }}>最新动态</Title>
                                <Link>查看更多</Link>
                            </div>
                            <List
                                dataSource={activityData}
                                renderItem={(item) => (
                                    <List.Item>
                                        <List.Item.Meta
                                            avatar={<Avatar src={`https://i.pravatar.cc/30?img=1`} />}
                                            title={
                                                <Paragraph style={{ margin: 0 }}>
                                                    <Text strong>{item.user}</Text>
                                                    <Text type="secondary">{item.action}：</Text>
                                                    <Text type="secondary">{item.content}</Text>
                                                </Paragraph>
                                            }
                                            description={<Text type="secondary">{item.time}</Text>}
                                        />
                                    </List.Item>
                                )}
                            />
                        </Card>
                    </Col>

                    {/* 右侧内容 - 我的团队和站内通知 */}
                    <Col xs={24} lg={8}>
                        {/* 我的团队 */}
                        <Card className="content-card">
                            <div className="card-header">
                                <Title level={4} style={{ margin: 0 }}>我的团队</Title>
                            </div>
                            <List
                                dataSource={teamData}
                                renderItem={(item, index) => (
                                    <List.Item>
                                        <List.Item.Meta
                                            avatar={<Avatar src={`https://i.pravatar.cc/30?img=${index + 10}`} />}
                                            title={item.name}
                                            description={<Text type="secondary">共{item.members}人</Text>}
                                        />
                                    </List.Item>
                                )}
                            />
                        </Card>

                        {/* 站内通知 */}
                        <Card className="content-card" style={{ marginTop: 24 }}>
                            <div className="card-header">
                                <Title level={4} style={{ margin: 0 }}>站内通知</Title>
                                <Badge count={3}><BellOutlined /></Badge>
                            </div>
                            <div style={{ textAlign: 'center', padding: '48px 0' }}>
                                <NotificationOutlined style={{ fontSize: '48px', color: '#ccc', marginBottom: 16 }} />
                                <Text type="secondary">暂无通知</Text>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Content>
        </Layout>
    );
};

export default Home1;